<script setup lang="ts">
import { reactive } from "vue";
import { parkList } from "@/utils/const";
import { RouteOptions, workOpt } from "@/pages/schedule/data";

const selectOptFrom = reactive({
  park: "",
  route: "",
});

const workInfo = {
  morning: {
    name: "王小明",
    tel: "13634561234",
  },
  noon: {
    name: "张三",
    tel: "13631561234",
  },
  night: {
    name: "李四",
    tel: "13642561234",
  },
};

const routerInfo = {
  park: 'A1',
  routers: ['216', '215', '214', '213', '212', '211', '210', '209', '201', '202', '203']
}
</script>

<template>
  <div class="polling">
    <el-form
      class="polling-form"
      :inline="true"
      :size="'small'"
      :model="selectOptFrom"
      >
      <el-form-item label="园区">
        <el-select
          v-model="selectOptFrom.park"
          placeholder="Select"
          style="width: 140px"
        >
          <el-option
            v-for="item in parkList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="线路">
        <el-select
          v-model="selectOptFrom.route"
          placeholder="Select"
          style="width: 120px"
        >
          <el-option
            v-for="item in RouteOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <div class="polling-info">
      <el-card
        class="polling-info-item"
        v-for="keyWord of Object.keys(workOpt)"
        :key="`${keyWord}`"
        >
        <div class="polling-info-item__context">
          <span>{{ workOpt[keyWord] }}</span>
          <span>{{ workInfo[keyWord].name }}</span>
          <span>{{ workInfo[keyWord].tel }}</span>
        </div>
      </el-card>
    </div>
    <div class="polling-route">
      <p class="polling-route__title">线路情况</p>
      <div class="polling-route__table">
        <div class="polling-route__table-title">A1</div>
        <div class="polling-route__table-body">
          <span v-for="(item, index) in routerInfo.routers" :key="`router-${index}`">
            {{ item }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.polling {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  &-form {

  }
  &-info {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    &-item {
      margin: 10px 0;
      &__context {
        display: flex;
        justify-content: space-around;
        font-size: 14px;
        line-height: 17px;
      }
    }
  }
  &-route {
    &__table {
      display: flex;
      &-title {
        border: 1px black solid;
        padding: 10px;
        flex: 1 1 auto;
        text-align: center;
        line-height: 100px;
      }
      &-body {
        display: flex;
        justify-content: start;
        flex-wrap: wrap;
        flex: 0 0 auto;
        width: 80%;
        border-top: 1px solid black;
        border-right: 1px solid black;
        span {
          text-align: center;
          width: 30%;
          border-bottom: 1px solid black;
          flex: 1 0 auto;
          position: relative;
          &::after {
            position: absolute;
            right: -15px;
            content: "->";
          }
          &:last-child, &:nth-child(3n) {
            &::after {
              content: none;
            }
          }
        }
      }
    }
  }
}
</style>
